<template>
	<view class="login-container">
		<view class="login-top">
			<img src="/schoolCube/static/img/logo.png" alt="" />
			<view class="username">择校魔方</view>
		</view>
		<view class="login-form">
			<view class="login-item">
				<view class="prefix">+86</view>
				<input type="text" class="login-phone" placeholder="请输入手机号码" v-model="loginForm.phone">
			</view>
			<view class="login-item">
				<input type="text" class="smscode" placeholder="请输入验证码" v-model="loginForm.code">
				<view class="timer" @click="sendSms">
					<button type="primary" :disabled="time !== 60">
						{{text}}
					</button>
				</view>
			</view>
		</view>
		<view class="login-bottom">
			<view class="agreement">
				<checkbox-group v-model="checked" @change="handleChange">
					<label>
						<checkbox value="1" class="custom-checkbox" />
						<text>我已阅读并同意</text>
					</label>
					<text class="item" @click="goAgreement(1)">《用户协议》</text>
					<text class="item" @click="goAgreement(2)">《隐私协议》</text>
				</checkbox-group>
			</view>
			<button type="primary" @click="handleLogin" :loading="isLoading" :disabled="isLoading">确定登录</button>
		</view>
	</view>
</template>

<script>
	import {
		loginBySms,
		login
	} from '@/requests/index.js'
	export default {
		data() {
			return {
				checked: '',
				loginForm: {
					phone: '',
					code: '',
				},
				time: 60,
				timer: null,
				text: '获取验证码',
				isSend: false,
				isLoading: false,
			}
		},
		methods: {
			goAgreement(type){
				uni.navigateTo({
					url: `/pages/user/text?type=${type}`
				});
			},
			async sendSms() {
				if (!this.loginForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'fail',
						duration: 1000
					});
					return;
				}
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.loginForm.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'error',
					});
					return;
				}
				if (this.time != 60) {
					return;
				}
				await loginBySms({
					phone: this.loginForm.phone
				});
				this.isSend = true;
				uni.showToast({
					title: '发送成功！',
					icon: 'success',
					duration: 2000
				});
				this.timer = setInterval(() => {
					this.time -= 1;
					this.text = `${this.time}秒后重新发送`;
					if (this.time === 0) {
						clearInterval(this.timer)
						this.timer = null;
						this.time = 60;
						this.text = '获取验证码';
					}
				}, 1000)
			},
			handleChange(e) {
				this.checked = e.detail.value;
			},
			async handleLogin() {
				if (!this.loginForm.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'fail',
						duration: 1000
					});
					return;
				}
				if (!this.loginForm.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'fail',
						duration: 1000
					});
					return;
				}
				if (!this.isSend) {
					uni.showToast({
						title: '请先获取验证码',
						icon: 'fail',
						duration: 1000
					});
					return;
				}
				if (!this.checked) {
					uni.showToast({
						title: '请确认并同意阅读协议',
						icon: 'fail',
						duration: 1000
					});
					return;
				}
				try {
					this.isLoading = true;
					const {
						needImprove,
						jwtToken
					} = await login({
						...this.loginForm
					})
					const that = this;
					uni.setStorageSync('token', jwtToken);
					this.isLoading = false;
					uni.setStorage({
						key: 'phone',
						data: that.loginForm.phone,
						success: function() {
							uni.showToast({
								title: '登录成功!',
								icon: 'success',
								duration: 1000
							});
							if (needImprove) {
								uni.navigateTo({
									url: '/pages/login/info'
								});
							} else {
								uni.reLaunch({
									url: '/pages/home/index' // 目标tabbar页面的路径
								})
							}
						},
						fail: function(err) {
							console.log('用户信息存储失败', err);
						}
					});
				} catch (e) {
					this.isLoading = false;
				}
			}
		},
		destroyed() {
			this.time = 60;
			clearInterval(this.timer);
			this.timer = null;
		},
		mounted() {
			uni.clearStorageSync();
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 0 86rpx;
		padding-top: 180rpx;
		font-size: 30rpx;
	}

	.login-top {
		text-align: center;

		img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20px;
		}
	}

	.login-form {
		.login-item {
			width: 100%;
			display: flex;
			border-bottom: 2rpx solid #CBCBCB;
			padding-top: 60rpx;

			.prefix {
				height: 80rpx;
				line-height: 80rpx;
				margin-right: 30rpx;
			}

			input {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}
	}

	.login-bottom {
		.agreement {
			margin: 40rpx 0;

			.item {
				color: #2979ff;
			}
		}
	}
</style>